<template>
  <el-dialog
    v-model="visible"
    :close-on-click-modal="false"
    :title="dialogTitle"
    draggable
    width="1350px"
    @close="queryRef.resetFields()"
  >
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="社群名称" prop="associationName">
        <el-input
          style="width: 214px"
          v-model="queryParams.associationName"
          placeholder="请输入社群名称"
          clearable
          @keyup.enter="handleQuery(false)"
        />
      </el-form-item>

      <el-form-item>
        <el-button @click="handleQuery(true)">重置</el-button>
        <el-button type="primary" @click="handleQuery(false)">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list">
      <el-table-column
        v-for="i in tableList"
        :key="i.label"
        :label="i.label"
        align="center"
        :prop="i.prop"
        :row-key="i.label"
        :width="i.width"
      />
    </el-table>

    <div style="margin-right: 50px; position: relative">
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </el-dialog>
</template>
<script setup>
import { getPointCommunitiesListApi } from '@/api/dataReport'

const visible = ref(false)
const dialogTitle = ref()

const queryRef = ref()
const list = ref([])
const loading = ref(false)
const showSearch = ref(true)
const total = ref(0)

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  areaId: null,
  routeId: null,
  positionId: null,
  associationName: null,
  operationName: null,
  startTime: null,
  endTime: null
})
const tableList = ref([
  { label: '社群名称', prop: 'associationName', width: 200 },
  { label: '客服人员', prop: 'operationName', width: 90 },
  { label: '成员数量', prop: 'member', width: 90 },
  { label: '新增用户数', prop: 'newClientNum', width: 90 },
  { label: '下单用户数', prop: 'buyClientNum', width: 90 },
  { label: '转化率', prop: 'conversionRate', width: 100 },
  { label: '新客下单用户数', prop: 'buyNewClientNum', width: 120 },
  { label: '新客下单占比', prop: 'newClientBuyProportion', width: 120 },
  { label: '复购率', prop: 'repeatedlyBuyRate', width: 100 },
  { label: '退款率', prop: 'refundRate', width: 100 },
  { label: '留存率', prop: 'keepRate', width: 100 },
  { label: '客单价', prop: 'averagePrice', width: 70 }
])
/**查询 */
function handleQuery(type) {
  if (type) {
    queryRef.value.resetFields()
    handleQuery(false)
  }
  queryParams.value.pageNum = 1
  getList()
}
function getList() {
  loading.value = true

  getPointCommunitiesListApi(queryParams.value)
    .then((res) => {
      console.log(res)
      loading.value = false
      list.value = res?.rows?.map((i) => ({
        ...i,
        conversionRate: `${i.conversionRate || 0}%`,
        newClientBuyProportion: `${i.newClientBuyProportion || 0}%`,
        repeatedlyBuyRate: `${i.repeatedlyBuyRate || 0}%`,
        refundRate: `${i.refundRate || 0}%`,
        keepRate: `${i.keepRate || 0}%`
      }))
      console.log(list.value)
      total.value = res.total || 0
    })
    .catch((err) => {
      console.log(err)
      loading.value = false
    })
}

function init(row, query) {
  console.log(query)
  dialogTitle.value = row.positionName
  queryParams.value = { ...queryParams.value, ...query, positionId: row.positionId }
  getList()
  visible.value = true
}

defineExpose({ init })
</script>
<style lang="scss" scoped></style>
